<template>
    <div class="headCont">
        <div class="logoCont">
          <img src="static/img/logo.png" />
          <div class="logoText">
            <div class="logoName">同橙优享</div>
            <div class="logoEng">Enjoy with orange</div>
          </div>
        </div>
        <div class="navCont">
          <div :class="navId==index?'navItem navItemActive':'navItem'" @click="navFn(item)" :key="index" v-for="(item,index) in navArr">
            <div>{{item.val}}</div>
            <div v-if="navId==index" class="navLine"></div>
            <div v-if="navId!=index" class="navLine_no"></div>
          </div>
          <div class="telCont">
            <div class="telNum">
              <div class="iconfont icon-24gl-phone24h"></div> 
              <div>18483613963</div>
            </div>
          </div>
        </div>
    </div>
  </template>
  
  <script>
  export default {
    components: {},
    data() {
      return {
        navArr:[
          {val:'同城家教',url:'/home'},
          {val:'同城家教',url:'/family'},
          {val:'同城按摩',url:'/tech'},
        ],
        navId:this.topId,
      };
    },
    props: {
      topId:Number,
    },
    methods: {
      navFn(item){
          this.$router.push({path:item.url})
      },
    },
    mounted() {},
    created() {}
  };
  </script>
  
  <style scoped lang="less">
 .headCont{
    min-width: 1200px;
    width: 100%;
    position: fixed;
    z-index: 10;
    left: 0px;
    top: 0px;
    height: 90px;
    // border-radius: 50px;
    background-color: rgba(255, 255, 255, 0.8);  
    display: flex;
    justify-content: space-between;
    padding: 0 50px;
    box-sizing: border-box;
    // box-shadow: 0 0 15px rgb(235,235,235);
    color: #ff8c00;
    .logoCont{
      display: flex;
      align-items: center;
      img{
        width: 70px;
        // border-radius: 50%;
        margin-right: 20px;
      }
      .logoText{
        .logoName{
          font-size: 24px;
          font-weight: bold;
          font-family: cursive;
        }
        .logoEng{
          font-family: serif;
          font-size: 18px;
        }
      }
    }
    .navCont{
      display: flex;
      align-items: center;
      .navItem{
        width: 110px;
        box-sizing: border-box;
        font-size: 18px;
        line-height: 90px;
        margin-right: 30px;
        font-weight: bold;
        text-align: center;
        cursor: pointer;
        color: black;
        position: relative;
        transition: all 0.3s linear;
        .navLine,.navLine_no{
            width: 110px;
            height: 3px;
            background-color: #ff8c00;
            position: absolute;
            bottom: 10px;
            left: 0;
            border-radius: 2px;
        }
        .navLine_no{
          transition: all 0.3s linear;
          width: 0;
        }
      }
      .navItem:hover .navLine_no{
        width: 110px;
      }
      .navItem:hover{
        color: #ff8c00;
      }
      .navItemActive{
        color: #ff8c00;
      }
      .telCont{
        .telNum{
          font-size: 20px;
          display: flex;
          align-items: center;
          margin-left: 50px;
          .iconfont{
            font-size: 30px;
            margin-right: 15px;
          }
        }
      }
    }
  }
  </style>
  